import { Line } from '@ant-design/charts';
import { PageHeaderWrapper } from '@ant-design/pro-components';
import { Pie } from '@ant-design/plots';
import { Card, Col, Form, Input, Row, Select, DatePicker, Button } from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
const { RangePicker } = DatePicker;

/**
 * 污染图表展示界面
 */
class PolluteChartShow extends Component {
  state = {};

  componentDidMount() {
    // 当页面组件完全的加载完毕触发此生命周期，只会触发一次
    this.formRef = React.createRef();
    this.handleRefreshData();
  }

  handleRefreshData() {
    let chartData = {};
    try {
      const getFormData = this.formRef.current.getFieldsValue();
      chartData = { ...getFormData };
    } catch (e) {
      chartData = undefined;
    }

    // 获取表格数据
    const { dispatch } = this.props;

    dispatch &&
      dispatch({
        type: 'polluteManage/getData',
        payload: chartData ? { chartData } : {},
      });
  }

  render() {
    const { polluteData } = this.props;
    let polluteDatas = [];
    polluteData.map((value, index) => {
      polluteDatas.push({ date: value.date, scales: +value.scales });
    });
    const line_config = {
      data: polluteDatas,
      padding: 'auto',
      xField: 'date',
      yField: 'scales',
      xAxis: {
        // type: 'timeCat',
        tickCount: 5,
      },
      slider: {},
      smooth: true,
    };

    return (
      <PageHeaderWrapper>
        <Card style={{ marginBottom: 10, paddingTop: 10, paddingBottom: -10 }}>
          <Form
            labelCol={{
              span: 6,
            }}
            ref={this.formRef}
            onFinish={() => {
              this.handleRefreshData();
            }}
          >
            <Row>
              <Col span={6}>
                <Form.Item label="断面选择" name="deviceid">
                  <Select
                    options={[
                      {
                        value: '1',
                        label: '何堂桥(17+775)',
                      },
                      {
                        value: '2',
                        label: '丁桥口桥(33+067)',
                      },
                      {
                        value: '3',
                        label: '石板桥(43+234)',
                      },
                      {
                        value: '4',
                        label: '赵西村桥(8+943)',
                      },
                      {
                        value: '5',
                        label: '14+800',
                      },
                    ]}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="污染物选择" name="classname">
                  <Select
                    options={[
                      { value: 'oil', label: '油类污染物' },
                      { value: 'mn', label: '锰' },
                      { value: 'fe', label: '铁' },
                      { value: 'hg', label: '汞' },
                      { value: 's', label: '硫' },
                      { value: 'cd', label: '镉' },
                      { value: 'cr', label: '铬' },
                      { value: 'pb', label: '铅' },
                    ]}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="日期选择" name="date">
                  <RangePicker />
                </Form.Item>
              </Col>
              <Button type="primary" htmlType="submit" style={{ marginLeft: 10 }}>
                查询
              </Button>
            </Row>
          </Form>
        </Card>

        <Row>
          <Col span={24}>
            <Card title="某断面污染浓度变化曲线图">单位:（mg/L）
              <Line {...line_config} style={{ height: 350 }} />
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="水质整体评估分析总结" style={{ marginTop: 15 }}>
              <p>
                结论：水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析
              </p>
              <p>
                水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析水质整体评估分析
              </p>
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ polluteManage }) => ({ polluteData: polluteManage.polluteData }))(
  PolluteChartShow,
);
